<div class="">
    <div class="empty-message" ng-if="observables.length === 0">
        No observables found
    </div>
    <div ng-if="observables.length > 0">
        <div class="mb-xs" ng-if="groups">
            <span class="label label-lg label-default mr-xxs clickable"
                ng-click="filterArtifacts('');"
                ng-class="{'label-primary': pagination.filter===''}">All ({{observables.length || 0}})</span>

            <span class="label label-lg label-default mr-xxs clickable"
                ng-repeat="(type, list) in groups"
                ng-click="filterArtifacts(type)"
                ng-class="{'label-primary': pagination.filter===type}">{{type}} ({{list.length}})</span>
        </div>
        <div class="mv-xxs">
            <strong class="text-muted">{{selected}} items selected</strong>
            <a class="ml-xs" href ng-click="selectAll()"><i class="fa fa-check"></i> Select all</a>
            <span ng-if="selected > 0">
                <a class="ml-xs" href ng-click="clearSelection()"><i class="fa fa-times"></i> Clear Selection</a>
                <span class="ml-xs">|</span>
                <a class="ml-xs" href ng-click="import()"><i class="fa fa-plus"></i> Import Selection</a>
            </span>

        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th style="width:20px;"></th>
                    <th style="width:20px;"></th>
                    <th style="width:150px;">Type</th>
                    <th>Data</th>
                    <th style="width:80px;"></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="observable in pagination.data | orderBy:'id':true |
                        offset: (pagination.currentPage-1)*pagination.pageSize |
                        limitTo: pagination.pageSize ">
                    <td><input type="checkbox" ng-model="observable.selected" ng-click="selectObservable(observable)" ng-disabled="observable.id"></td>
                    <td>
                        <span uib-tooltip="Observable already id" tooltip-popup-delay="500" tooltip-placement="bottom" ng-if="observable.id" class="glyphicon glyphicon-eye-open"></span>
                    </td>
                    <td>{{observable.dataType}}</td>
                    <td class="wrap">
                        {{observable.data | fang | ellipsis:250}}
                    </td>
                    <td class="wrap">
                        <a ng-if="observable.id" href ui-sref="app.case.observables-item({caseId: caseId, itemId: observable.id})"><i class="fa fa-search"></i> View</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="text-center" ng-show="pagination.data.length > pagination.pageSize">
            <ul uib-pagination class="pagination-sm" boundary-links="true"  max-size="5" rotate="false"
                total-items="pagination.data.length"
                items-per-page="pagination.pageSize"
                ng-change="loadPage()"
                ng-model="pagination.currentPage"></ul>
        </div>
    </div>
</div>
